<template>
  <div class="app-page">
    <!-- 头 -->
    <div class="app-header">
      <div class="app-title">
        <i :class="$route.meta.icon"></i> {{ $route.meta.title }}
      </div>
    </div>
    <!-- 单页 -->
    <div class="app-page-padding">
      <div v-loading="pageLoading" style="padding:20px 20px 0 0">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" size="small" label-width="110px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="上级分类：">
                <VTreeSelect
                  :tree-data="treeData"
                  :tree-default-props="defaultProps"
                  :selected-key.sync="ruleForm.parentUuid"
                  :selected-value.sync="ruleForm.parentName"
                  tree-node-key="uuid"
                  tree-node-name="name"
                ></VTreeSelect>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="">
                <el-button :loading="loading" type="primary" size="small" class="fa fa-check" @click="validateSubmit(ruleForm)">
                  保存
                </el-button>
                <el-button size="small" class="fa fa-reply-all" @click="close">
                  关闭
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { add, update, getData } from '@/mock/index'

import VTreeSelect from '@/components/VTreeSelect'
import { arrayToTree } from '@/utils/tree.js'
export default {
  name: 'FormTreeSelect',
  components: {
    VTreeSelect
  },
  data () {
    return {
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      // 树数据
      treeData: [],
      // 提交表单loading
      loading: false,
      // 页面加载完成loading
      pageLoading: false,
      // 表单
      ruleForm: {
      },
      // 验证
      rules: {
      }
    }
  },
  created () {
    this.getTreeData()
  },
  methods: {
    // 关闭跳转
    close () {
      this.closeView(this.$route)
    },
    // 验证
    validateSubmit (ruleForm) {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          this.submit(ruleForm)
        } else {
          return false
        }
      })
    },
    // 提交表单
    async submit (ruleForm) {
      this.loading = true
      if (this.isEdit) {
        // 编辑
        const res = await update(ruleForm)
        if (res.code === '0000') {
          this.$message({
            message: res.message,
            type: 'success'
          })
          this.jumpRouterView(this.$route, { path: '/user' })
        }
      } else {
        // 增加
        const res = await add(ruleForm)
        if (res.code === '0000') {
          this.$message({
            message: res.message,
            type: 'success'
          })
          this.jumpRouterView(this.$route, { path: '/user' })
        }
      }
      this.loading = false
    },
    // 获取树
    async getTreeData () {
      const treeData = [
        {
          url: '/admin/list',
          visible: true,
          parentUuid: '',
          icon: 'home',
          icontype: 1,
          sort: 1,
          type: true,
          status: '0',
          remarks: '',
          uuid: '5e6603617bbcd20814cd335f',
          name: '管理员管理',
          __v: 0
        },
        {
          url: '/news/list',
          visible: true,
          parentUuid: '5e6603917bbcd20814cd3361',
          icon: 'nested',
          icontype: 1,
          sort: 1,
          type: true,
          status: '0',
          remarks: '',
          uuid: '5e6603aa7bbcd20814cd3362',
          name: '新闻列表',
          __v: 0
        },
        {
          url: '/product/list',
          visible: true,
          parentUuid: '5e675ea0e600633fa868a0d4',
          icon: 'table',
          icontype: 1,
          sort: 1,
          type: true,
          status: '0',
          remarks: '',
          uuid: '5e675f04e600633fa868a0d6',
          name: '产品列表',
          __v: 0
        },
        {
          url: '/product/category/list',
          visible: true,
          parentUuid: '5e675ea0e600633fa868a0d4',
          icon: 'logout',
          icontype: 1,
          sort: 1,
          type: true,
          status: '0',
          remarks: '',
          uuid: '5e675fcae600633fa868a0d8',
          name: '产品分类',
          __v: 0
        },
        {
          url: '/file/list',
          visible: true,
          parentUuid: '5e683b40facbc11e140624a0',
          icon: 'nested',
          icontype: 1,
          sort: 1,
          type: true,
          status: '0',
          remarks: '',
          uuid: '5e683b5dfacbc11e140624a1',
          name: '文件列表',
          __v: 0
        },
        {
          url: '/menu/list',
          visible: true,
          parentUuid: '',
          icon: 'el-icon-menu',
          icontype: 2,
          sort: 2,
          type: true,
          status: '0',
          remarks: '',
          uuid: '5e6602e07bbcd20814cd335e',
          name: '菜单管理',
          __v: 0
        },
        {
          url: '/news/category',
          visible: true,
          parentUuid: '5e6603917bbcd20814cd3361',
          icon: 'el-icon-tickets',
          icontype: 2,
          sort: 2,
          type: true,
          status: '0',
          remarks: '',
          uuid: '5e675ee2e600633fa868a0d5',
          name: '新闻分类',
          __v: 0
        },
        {
          url: '/file/category/list',
          visible: true,
          parentUuid: '5e683b40facbc11e140624a0',
          icon: 'tree',
          icontype: 1,
          sort: 2,
          type: true,
          status: '0',
          remarks: '',
          uuid: '5e683b7efacbc11e140624a2',
          name: '图片分类',
          __v: 0
        },
        {
          url: '/about/list',
          visible: true,
          parentUuid: '',
          icon: 'el-icon-service',
          icontype: 2,
          sort: 3,
          type: true,
          status: '0',
          remarks: '',
          uuid: '5e6603707bbcd20814cd3360',
          name: '关于我们',
          __v: 0
        },
        {
          url: '/news',
          visible: true,
          parentUuid: '',
          icon: 'el-icon-info',
          icontype: 2,
          sort: 4,
          type: true,
          status: '0',
          remarks: '',
          uuid: '5e6603917bbcd20814cd3361',
          name: '新闻管理',
          __v: 0
        },
        {
          url: '/product',
          visible: true,
          parentUuid: '',
          icon: 'tree',
          icontype: 1,
          sort: 5,
          type: true,
          status: '0',
          remarks: '',
          uuid: '5e675ea0e600633fa868a0d4',
          name: '产品中心',
          __v: 0
        },
        {
          url: '/file/list',
          visible: true,
          parentUuid: '',
          icon: 'el-icon-document',
          icontype: 2,
          sort: 8,
          type: true,
          status: '0',
          remarks: '',
          uuid: '5e683b40facbc11e140624a0',
          name: '文件管理',
          __v: 0
        }
      ]
      const res = await getData({}, treeData)
      if (res.code === '0000') {
        const invaildId = []
        this.treeData = arrayToTree(res.data, invaildId, 'uuid', 'parentUuid')
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="scss" scoped>
</style>
